/**
 * @class
 * @description 在当前canvas之上覆盖一个大小位置都一样的canvas遮罩层
 */
class Mask {
  /**
   * @decription 在当前canvas之上覆盖一个大小位置都一样的canvas遮罩层
   * @constructor
   * @param {Object} options 模态窗的配置参数
   * @param {HTMLCanvasElement} options.canvas 原先的canvas对象
   * @param {string} options.primaryColor 主题颜色，用于设置标题字体颜色，按钮颜色
   * @param {string} options.maskColor 遮罩层颜色，建议带透明度，如rgba(128, 128, 128, 0.6)
   * @param {string} options.btnTextColor 按钮字体颜色，默认白色
   * @param {string} options.textTitle 标题文本
   * @param {string} options.restartBtnText 重新开始按钮的文本
   * @param {string} options.redirectRoute 重新开始按钮点击后跳转的路由
   * @param {Object} options.router Vue Router 实例
   */
  constructor({
                isFullScreen,
                canvas,
                primaryColor = '#F56C6C',
                maskColor = 'rgba(128, 128, 128, 0.6)',
                btnTextColor = '#FFFFFF',
                textTitle = '游戏结束',
                restartBtnText = '重新开始',
                redirectRoute = 'pk_index', // 修改为目标跳转的路由
                router, // Vue Router 实例
                titleH = 50, // 标题的高度（字体大小）
                titleBtnSpacing = 50, // 标题和按钮的间距
                btnH = 40, // 按钮高度（包含padding）
                btnPadding = 10 // 按钮的padding
              }) {
    Object.assign(this, {
      primaryColor, // 主题颜色，用于字体、按钮颜色等
      maskColor, // 遮罩层的颜色，默认半透明灰色
      btnTextColor, // 按钮字体颜色
      textTitle, // 模态窗的标题
      restartBtnText, // 重新开始按钮的文本
      redirectRoute, // 重新开始按钮点击后跳转的路由
      router, // Vue Router 实例
      W: canvas?.width, // 原canvas的宽，会创建一个临时的canvas覆盖在上面
      H: canvas?.height, // canvas的高，会创建一个临时的canvas覆盖在上面
      titleH, // 标题的高度（字体大小）
      titleBtnSpacing, // 标题和按钮的间距
      btnH, // 按钮高度（包含padding）
      btnPadding // 按钮的padding
    });

    // 和原canvas大小位置都一样的新canvas
    this.canvas = document.createElement('canvas');
    this.ctx = this.canvas.getContext('2d');
    this.canvas.id = `mask-canvas-${new Date().getTime()}`;
    if (isFullScreen) {
      this.canvas.width = window.innerWidth;
      this.W = window.innerWidth;
      this.canvas.height = window.innerHeight;
      this.H = window.innerHeight;
      this.canvas.style.cssText = `position: absolute; inset: 0; margin: auto; cursor: pointer;`;
      document.body.appendChild(this.canvas);
    } else {
      this.canvas.width = this.W;
      this.canvas.height = this.H;
      this.canvas.style.cssText = `position: absolute; inset: 0; margin: auto; cursor: pointer;`;
      canvas.parentNode.appendChild(this.canvas);
    }
    this.drawMask(); // 绘制遮罩层
    this.drawTitle(); // 绘制标题
    this.drawButton(); // 绘制按钮，绑定遮罩层点击事件，判断是否点击到按钮，执行相应回调
  }

  // 绘制遮罩层
  drawMask() {
    const { ctx, H, W, maskColor } = this;
    ctx.fillStyle = maskColor;
    ctx.fillRect(0, 0, W, H);
  }

  // 绘制标题
  drawTitle() {
    const { ctx, H, W, btnH, textTitle, titleH, titleBtnSpacing, primaryColor } = this;
    ctx.font = `${titleH}px Arial`;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'top';
    ctx.fillStyle = primaryColor;
    ctx.fillText(textTitle, W / 2, (H - titleH - titleBtnSpacing - btnH) / 2);
  }

  // 绘制按钮（并绑定点击事件）
  drawButton() {
    const {
      canvas, ctx, H, W, btnTextColor, primaryColor, router, redirectRoute, titleH,
      titleBtnSpacing, restartBtnText, btnH, btnPadding
    } = this;

    // 设置按钮样式（需提前设置字体大小，这样通过measureText方法计算文本内容的宽度）
    ctx.font = `${btnH - btnPadding * 2}px Arial`;
    ctx.textBaseline = 'top';
    ctx.textAlign = 'left';

    const restartBtnW = ctx.measureText(restartBtnText).width + btnPadding * 2, // 重新开始按钮宽度，不含padding
        btnY = (H + titleH + titleBtnSpacing) / 2 - btnH / 2, // 按钮左上角纵坐标
        restartBtnX = (W - restartBtnW) / 2, // 重新开始按钮左上角横坐标
        restartBtnRange = [restartBtnX, restartBtnX + restartBtnW, btnY, btnY + btnH]; // 重新开始按钮所占矩形范围（左右X的范围，上下Y的范围）

    // 绘制重新开始按钮
    ctx.fillStyle = primaryColor;
    ctx.fillRect(restartBtnX, btnY, restartBtnW, btnH);
    ctx.fillStyle = btnTextColor;
    ctx.fillText(restartBtnText, restartBtnX + btnPadding, btnY + btnPadding);

    // 判断坐标是否在矩形（按钮）范围之内
    const isPointInRange = (x, y, [left, right, top, bottom]) => x >= left && x <= right && y >= top && y <= bottom;

    // 监听点击事件，若点击到按钮，执行相应回调
    canvas.onclick = e => {
      if (isPointInRange(e.offsetX, e.offsetY, restartBtnRange)) {
        this.close();
        if (router) {
          router.push(redirectRoute); // 使用 Vue Router 进行跳转
        } else {
          console.error('Vue Router 实例未提供');
        }
      }
    };
  }

  // 关闭模态窗（移除DOM节点）
  close() {
    this.ctx.clearRect(0, 0, this.W, this.H);
    this.canvas.onclick = null;
    document.getElementById(this.canvas.id).remove();
  }
}

export default Mask;
